<template>
  <div id="userLayout" :class="['user-layout-wrapper', device]">
    <div class="container">
      <div class="top" style="background-color: #fff;">
        <div class="section_1 flex-row" style="width:800px; margin: 0 auto;">
          <img
            class="image_1"
            referrerpolicy="no-referrer"
            src="../../assets/pswq0kid3bf5dkw4o9oa4x67efr0cre51x84212725b-f808-416a-9cf5-2e07125a221a.png"
          />
          <div class="text-wrapper_1 flex-col justify-between">
            <span class="text_1">全国公共资源交易平台</span>
            <span class="text_2">开封市公共资源交易平台</span>
          </div>
        </div>
      </div>

      <route-view></route-view>

      <div class="footer">
        <div class="section_4 flex-col">
          <div class="group_9 flex-row justify-between">
            <div class="text-wrapper_8 flex-col">
              <span class="text_28">相关链接</span>
            </div>
            <div class="text-wrapper_9 flex-col">
              <span class="text_29">行政监督部门</span>
            </div>
            <div class="text-wrapper_10 flex-col">
              <span class="text_30">市级交易中中心</span>
            </div>
          </div>
          <span class="paragraph_12"
            >版权所有：开封市公共资源交易信息网承办：开封市公共资源交易信息网<br />地址：开封市市民之家五楼&nbsp;邮编：475000&nbsp;邮箱：kfsggzyxxjsb&#64;163.com&nbsp;网站备案号：豫ICP备12001764号-1</span
          >
        </div>
        <!--        <div class="copyright">
          Copyright &copy; 2024 <a href="javaScript:;" target="_blank">开封市公共资源交易平台</a> 出品
        </div>-->
      </div>
    </div>
  </div>
</template>

<script>
import RouteView from '@/components/layouts/RouteView'
import { mixinDevice } from '@/utils/mixin.js'

export default {
  name: 'UserLayout',
  components: { RouteView },
  mixins: [mixinDevice],
  data() {
    return {}
  },
  mounted() {
    document.body.classList.add('userLayout')
  },
  beforeDestroy() {
    document.body.classList.remove('userLayout')
  },
}
</script>

<style lang="less" scoped>
.section_4 {
  background-color: rgba(255, 255, 255, 1);
  padding: 30.56px; /* 2vw * 15.28 */
  .group_9 {
    display: flex;
    height: 34.1952px; /* 2.24vw * 15.28 */
    justify-content: center;
    div {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .text-wrapper_8 {
      background-color: rgba(255, 255, 255, 1);
      height: 32.7032px; /* 2.14vw * 15.28 */
      border: 1px solid rgba(208, 208, 208, 1);
      margin-top: 1.6808px; /* 0.11vw * 15.28 */
      width: 136.0398px; /* 8.91vw * 15.28 */
      .text_28 {
        width: 43.8176px; /* 2.87vw * 15.28 */

        overflow-wrap: break-word;
        color: rgba(51, 51, 51, 1);
        font-size: 11.0296px; /* 0.72vw * 15.28 */
        font-family: AlibabaPuHuiTi-Regular;
        font-weight: normal;
        text-align: left;
        white-space: nowrap;
        line-height: 28.7664px; /* 1.88vw * 15.28 */
      }
    }
    .text-wrapper_9 {
      background-color: rgba(255, 255, 255, 1);

      border: 1px solid rgba(208, 208, 208, 1);
      width: 136.0398px; /* 8.91vw * 15.28 */
      margin: 1.528px 0 0 15.0744px; /* 0.1vw * 15.28 和 0.98vw * 15.28 */
      .text_29 {
        width: 65.4144px; /* 4.28vw * 15.28 */

        overflow-wrap: break-word;
        color: rgba(51, 51, 51, 1);
        font-size: 11.0296px; /* 0.72vw * 15.28 */
        font-family: AlibabaPuHuiTi-Regular;
        font-weight: normal;
        text-align: left;
        white-space: nowrap;
        line-height: 28.7664px; /* 1.88vw * 15.28 */
      }
    }
    .text-wrapper_10 {
      background-color: rgba(255, 255, 255, 1);

      border: 1px solid rgba(208, 208, 208, 1);
      margin-left: 15.1272px; /* 0.99vw * 15.28 */
      width: 136.0398px; /* 8.91vw * 15.28 */
      .text_30 {
        width: 76.4px; /* 5vw * 15.28 */

        overflow-wrap: break-word;
        color: rgba(51, 51, 51, 1);
        font-size: 11.0296px; /* 0.72vw * 15.28 */
        font-family: AlibabaPuHuiTi-Regular;
        font-weight: normal;
        text-align: left;
        white-space: nowrap;
        line-height: 28.7664px; /* 1.88vw * 15.28 */
      }
    }
  }
  .paragraph_12 {
    width: 618.9864px; /* 40.53vw * 15.28 */
    height: 37.372px; /* 2.45vw * 15.28 */
    overflow-wrap: break-word;
    color: rgba(153, 153, 153, 1);
    font-size: 12.6624px; /* 0.83vw * 15.28 */
    font-family: AlibabaPuHuiTi-Regular;
    font-weight: normal;
    text-align: center;
    line-height: 23.9576px; /* 1.57vw * 15.28 */
  }
}
.section_1 {
  font-family: AlibabaPuHuiTi-Bold;
  background-color: rgba(255, 255, 255, 1);
  display: flex;
  height: 78.568px; /* 5.15vw * 15.28 */
  .image_1 {
    width: 90.7992px; /* 5.94vw * 15.28 */
    height: 66.8664px; /* 4.38vw * 15.28 */
    border: 2px solid rgba(255, 255, 255, 1);
    //margin: 0 0 0 308.656px; /* 20.2vw * 15.28 */
  }
  .text-wrapper_1 {
    width: 258.3804px; /* 16.93vw * 15.28 */
    height: 51.8392px; /* 3.39vw * 15.28 */
    margin: 0 0 0 11.0296px; /* 0.72vw * 15.28 */
    span {
      display: block;
      font-size: 23.808px; /* 1.56vw * 15.28 */
      color: rgba(174, 46, 51, 1);
      line-height: 43.9176px; /* 2.87vw * 15.28 */
    }
    .text_1 {
      width: 258.3804px; /* 16.93vw * 15.28 */
      height: 25.5136px; /* 1.67vw * 15.28 */
      overflow-wrap: break-word;

      font-weight: 700;
      text-align: left;
      white-space: nowrap;
    }
    .text_2 {
      width: 256.0824px; /* 16.78vw * 15.28 */
      height: 23.2656px; /* 1.52vw * 15.28 */
      overflow-wrap: break-word;

      font-weight: 700;
      text-align: left;
      white-space: nowrap;
    }
  }
}
#userLayout.user-layout-wrapper {
  height: 100%;
  background: url(../../assets/pswek5fd5rz9th13katf1f74lqp357kbkvf21ae493-83a3-4bb3-9ddf-6c0cba67da40.png) 100%
    no-repeat;
  background-size: 100% 100%;
  &.mobile {
    .container {
      .main {
        max-width: 561.424px; /* 368px 不需要转换 */
        width: 98%; /* 百分比单位保持不变 */
      }
    }
  }

  .container {
    width: 100%;
    min-height: 100%;
    background: url(../../assets/ps9n3wiq7h85d0s7gb2d3cwnm7uz3xbwnfja74fb35a4-1be0-47ce-8eee-fea9f53eb653.png) -69.8632px
      400.3712px no-repeat;
    background-size: 1599.6px 249.344px; /* 105vw * 15.28 和 16.3vw * 15.28 */

    position: relative;

    a {
      text-decoration: none;
    }

    .top {
      text-align: center;

      .header {
        height: 44px;
        line-height: 44px;

        .badge {
          position: absolute;
          display: inline-block;
          line-height: 1;
          vertical-align: middle;
          margin-left: -12px;
          margin-top: -10px;
          opacity: 0.8;
        }

        .logo {
          height: 49px;
          vertical-align: top;
          margin-right: 16px;
          border-style: none;
        }

        .title {
          font-size: 50.424px; /* 33px 不需要转换 */
          color: rgba(0, 0, 0, 0.85);
          font-family: 'Chinese Quote', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
            'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
            'Segoe UI Symbol';
          font-weight: 600;
          position: relative;
          top: 2px;
        }
      }
      .desc {
        font-size: 21.392px; /* 14px 不需要转换 */
        color: rgba(0, 0, 0, 0.45);
        margin-top: 18.336px; /* 12px 不需要转换 */
        margin-bottom: 61.12px; /* 40px 不需要转换 */
      }
    }

    .main {
      padding-top: 45.84px; /* 3vw * 15.28 */
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .footer {
      position: absolute;
      width: 100%;
      bottom: 0;
      text-align: center;

      .links {
        margin-bottom: 12.224px; /* 8px 不需要转换 */
        font-size: 21.392px; /* 14px 不需要转换 */
        a {
          color: rgba(0, 0, 0, 0.45);
          transition: all 0.3s;
          &:not(:last-child) {
            margin-right: 61.12px; /* 40px 不需要转换 */
          }
        }
      }
      .copyright {
        color: rgba(0, 0, 0, 0.45);
        font-size: 21.392px; /* 14px 不需要转换 */
      }
    }
  }
}
</style>
